スタイリング
軸のスタイルを設定できるようにするためのオプションが多数あります。制御する設定がありますグリッド線とダニ。
グリッドラインの設定
グリッド線の設定は、スケール設定の下にネストされています。gridLines
鍵。軸に対して垂直に走るグリッド線のオプションを定義します。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
display |
boolean |
true |
false の場合、この軸のグリッド線を表示しません。 |
circular |
boolean |
false |
true の場合、グリッド線は円形になります (レーダー チャートのみ)。 |
color |
Color|Color[] |
'rgba(0, 0, 0, 0.1)' |
グリッド線の色。配列として指定した場合、最初の色は最初のグリッド ラインに適用され、2 番目の色は 2 番目のグリッド ラインに適用されます。 |
borderDash |
number[] |
[] |
グリッド線のダッシュの長さと間隔。見るMDN。 |
borderDashOffset |
number |
0.0 |
破線のオフセット。見るMDN。 |
lineWidth |
number|number[] |
1 |
グリッド線のストローク幅。 |
drawBorder |
boolean |
true |
true の場合、軸とグラフ領域の間の端に境界線を描画します。 |
drawOnChartArea |
boolean |
true |
true の場合、グラフ領域の軸線の内側に線を描画します。これは、複数の軸があり、どのグリッド線を描画するかを制御する必要がある場合に便利です。 |
drawTicks |
boolean |
true |
true の場合、グラフの横の軸領域の目盛りの横に線を描画します。 |
tickMarkLength |
number |
10 |
グリッド線が軸領域に描画される長さ (ピクセル単位)。 |
zeroLineWidth |
number |
1 |
最初のインデックス (インデックス 0) のグリッド線のストローク幅。 |
zeroLineColor |
Color |
'rgba(0, 0, 0, 0.25)' |
最初のインデックス (インデックス 0) のグリッド線のストロークの色。 |
zeroLineBorderDash |
number[] |
[] |
最初のインデックス (インデックス 0) のグリッド線のダッシュの長さと間隔。見るMDN。 |
zeroLineBorderDashOffset |
number |
0.0 |
最初のインデックス (インデックス 0) のグリッド線の破線のオフセット。見るMDN。 |
offsetGridLines |
boolean |
false |
true の場合、グリッド線はラベル間に位置するように移動されます。これは次のように設定されていますtrue デフォルトで棒グラフの場合。 |
z |
number |
0 |
グリッドライン レイヤーの Z インデックス。値 <= 0 はデータセットの下に描画され、値 > 0 は上に描画されます。 |
ティック設定
ティック設定は、スケール設定の下にネストされています。ticks
鍵。軸によって生成される目盛りのオプションを定義します。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
callback |
function |
チャート上に表示されるティック値の文字列表現を返します。見る折り返し電話。 | |
display |
boolean |
true |
true の場合、目盛りラベルを表示します。 |
fontColor |
Color |
'#666' |
目盛ラベルのフォントの色。 |
fontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
目盛りラベルのフォント ファミリは、CSS フォント ファミリ オプションに従います。 |
fontSize |
number |
12 |
目盛ラベルのフォント サイズ。 |
fontStyle |
string |
'normal' |
目盛ラベルのフォント スタイルは、CSS フォント スタイル オプション (つまり、標準、斜体、斜体、初期、継承) に従います。 |
lineHeight |
number|string |
1.2 |
テキストの個々の行の高さ (「MDN)。 |
reverse |
boolean |
false |
目盛ラベルの順序を逆にします。 |
minor |
object |
{} |
マイナーティック構成。省略されたオプションは、上記のオプションから継承されます。 |
major |
object |
{} |
主要なティックの構成。省略されたオプションは、上記のオプションから継承されます。 |
padding |
number |
0 |
軸からの目盛りラベルのオフセットを設定します。 |
z |
number |
0 |
目盛りレイヤーの Z インデックス。チャート領域に目盛りを描画する場合に便利です。値 <= 0 はデータセットの下に描画され、値 > 0 は上に描画されます。 |
マイナーティック設定
minorTick 設定は、ticks 設定の下にネストされています。minor
鍵。軸によって生成される副目盛りのオプションを定義します。省略されたオプションは継承されますticks
構成。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
callback |
function |
チャート上に表示されるティック値の文字列表現を返します。見る折り返し電話。 | |
fontColor |
Color |
'#666' |
目盛ラベルのフォントの色。 |
fontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
目盛りラベルのフォント ファミリは、CSS フォント ファミリ オプションに従います。 |
fontSize |
number |
12 |
目盛ラベルのフォント サイズ。 |
fontStyle |
string |
'normal' |
目盛ラベルのフォント スタイルは、CSS フォント スタイル オプション (つまり、標準、斜体、斜体、初期、継承) に従います。 |
lineHeight |
number|string |
1.2 |
テキストの個々の行の高さ (「MDN)。 |
メジャーティック設定
MajorTick 設定は、ticks 設定の下にネストされています。major
鍵。軸によって生成される主目盛りのオプションを定義します。省略されたオプションは継承されますticks
構成。これらのオプションはデフォルトでは無効になっています。
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
enabled |
boolean |
false |
true の場合、主目盛オプションを使用して主目盛が表示されます。 |
callback |
function |
チャート上に表示されるティック値の文字列表現を返します。見る折り返し電話。 | |
fontColor |
Color |
'#666' |
目盛ラベルのフォントの色。 |
fontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
目盛りラベルのフォント ファミリは、CSS フォント ファミリ オプションに従います。 |
fontSize |
number |
12 |
目盛ラベルのフォント サイズ。 |
fontStyle |
string |
'normal' |
目盛ラベルのフォント スタイルは、CSS フォント スタイル オプション (つまり、標準、斜体、斜体、初期、継承) に従います。 |
lineHeight |
number|string |
1.2 |
テキストの個々の行の高さ (「MDN)。 |